<template>
  <div class="menu direction-conter">
    <div class="menu-user direction-conter">
      <div class="user-img">
        <img src="@/assets/images/nan.png" alt="" />
      </div>
      <div class="user-name">王小虎</div>
      <div class="user-major">工商管理专业</div>
    </div>
    <div class="menu-list">
      <div
        v-for="(item, index) in menuList"
        :key="index"
        class="menu-item items-content"
        :class="{ active: index == indexKey }"
        @click="menuFn(item, index)"
      >
        <div class="item-img">
          <img :src="item.imgUrl" alt="" />
        </div>
        <div class="item-title">{{ item.title }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, defineEmits, watch } from "vue";
import { setSession } from "@/utils/index";
const emit = defineEmits(["selectNav"]);
import { useRouter } from "vue-router";
import yuxi from "@/assets/images/yuxi.png";
import kejian from "@/assets/images/kejian.png";
import xiti from "@/assets/images/xiti.png";
const router = useRouter();
let data = reactive({
  menuList: [
    {
      title: "预习",
      path: "/practice",
      // path: "/assistant",
      imgUrl: yuxi,
    },
    {
      title: "课程与视频",
      path: "/curriculum",
      imgUrl: kejian,
    },
    {
      title: "习题管理",
      path: "/tool",
      imgUrl: xiti,
    },
  ],
});
let indexKey = ref(0);
const { menuList } = toRefs(data);
setSession("navTitle", "练习");
function menuFn(item, index) {
  indexKey.value = index;
  setSession("navTitle", item.title);
  emit("selectNav");
  router.push(item.path);
}
watch(
  () => router.currentRoute.value.path,
  (toPath) => {
    console.log(toPath, "-toPath----");
    menuList.value.forEach((item, index) => {
      if (item.path.includes(toPath)) {
        indexKey.value = index;
      }
    });
  },
  { immediate: true, deep: true }
);
</script>
<style lang="less" scoped>
.active {
  color: #fff;
  background: #1e90ff;
}
.menu {
  padding-top: 20px;
  // background: #e9f3ff;
  box-shadow: 0 0 4px 0 #999;
  height: 100%;
  .menu-user {
    margin-bottom: 100px;
    .user-img {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      margin-bottom: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }

    .user-name {
      margin-bottom: 10px;
    }
    .user-major {
      color: #696969;
    }
  }
  .menu-list {
    width: 100%;
    .menu-item {
      margin-bottom: 20px;
      padding: 10px 20px;
      width: 100%;
      cursor: pointer;
      .item-img {
        width: 25px;
        height: 25px;
        margin-right: 10px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .item-title {
      }
    }
  }
}
</style>
